<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from "vue";
// 引入水球图插件, 在echarts中可以使用type=liquidFill引用
import "echarts-liquidfill";

import { getReportData } from "@/api/index.js";

const option = ref({});

const renderChart = (data) => {
  option.value = {
    series: {
      type: "liquidFill",
      data: [data],
      color: ["red"],
      radius: "80%", // 水球的半径
      outline: {
        borderDistance: 2, // 轮廓的距离(padding)
        itemStyle: {
          borderWidth: 2, // 轮廓的宽度(border)
        },
      }, // 连线的轮廓
      amplitude: "4%", // 波浪的高度(振幅)
    },
  };
};

onMounted(async () => {
  const res = await getReportData();

  const data = (res.salesGrowLastDay / 100).toFixed(2);
  renderChart(data);
});
</script>

<style scoped></style>
